<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-color-selector-bar
                title="颜色"
                desc="color=xx/颜色值"
                v-model="color"
            ></uxt-color-selector-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <view class="padding bg-theme text-center round" @click="handleClick">
                    展示页面加载
                </view>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '页面加载',
            color: 'red'
        }
    },
    methods: {
        handleClick() {
            this.uxtPageLoading({
                color: this.color
            }).show()
            setTimeout(() => {
                this.uxtPageLoading().hide()
            }, 5000)
        }
    }
}
</script>

<style lang="scss" scoped></style>
